import { View } from "@tarojs/components";
import { useRouter, setNavigationBarTitle, useDidShow } from "@tarojs/taro";
import { useRef } from "react";
import TutorialSearch from "./components/TutorialSearch";
import TutorialList from "./components/TutorialList";
import { https } from "@utils/index";
import { useModel } from "@utils/hooks";
import RuiPaging, { RuiPagingRef } from "./components/RuiPaging";
const List = () => {
  const { params } = useRouter();
  const [videos, model] = useModel<Course[]>([]);
  const paging = useRef<RuiPagingRef>(null);
  const [keyword, keywordModel] = useModel("");
  useDidShow(() => {
    setNavigationBarTitle({
      title: decodeURIComponent(params.name as string) || "教程",
    });
  });
  const init = () => {
    paging?.current?.reload();
  };
  // 教程列表
  const getCourseList = (pageNum, pageSize) => {
    https
      .getCourseList({ keyword, classify_id: params?.id, pageNum, pageSize })
      .then((res) => {
        const data = res?.data?.data;
        paging?.current?.complete(data?.records);
      });
  };
  return (
    <RuiPaging {...model()} ref={paging} onQuery={getCourseList}>
      <View className="bg-[#eee] min-h-[100vh]">
        <TutorialSearch {...keywordModel} onSearch={init} />
        <View className="m-[30px] ">
          <TutorialList videos={videos} />
        </View>
      </View>
    </RuiPaging>
  );
};

export default List;
